import React, { useState, useEffect } from "react";
import "./index.scss";
// import {
//   MenuFoldOutlined,
//   MenuUnfoldOutlined,
//   UploadOutlined,
//   UserOutlined,
//   VideoCameraOutlined,
// } from "@ant-design/icons";
import { Link, Outlet, useNavigate } from "react-router-dom";
import Iconfont from "../utils/Icons";
import { Layout, Menu, Button, theme } from "antd";
const { Header, Sider, Content } = Layout;
const Main = () => {
  const [power, setPower] = useState([]);
  const [collapsed, setCollapsed] = useState(false);
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken();

  useEffect(() => {
    let list = JSON.parse(sessionStorage.getItem("power"));

    let mylist = list.map((item) => {
      let i = item.icon;

      return {
        key: item.link,
        icon: <Iconfont icon={i}></Iconfont>,
        label: <Link to={item.link}>{item.title}</Link>,
      };
    });
    // console.log(newItems);
    setPower(mylist);
    // console.log(power);
  }, []);

  return (
    <>
      <Layout className="main">
        <Sider trigger={null} collapsible collapsed={collapsed} theme={"light"}>
          <div className="demo-logo-vertical" />
          <Menu
            theme="light"
            mode="inline"
            defaultSelectedKeys={["1"]}
            items={power}
          />
        </Sider>
        <Layout>
          <Header
            style={{
              padding: 0,
              background: colorBgContainer,
            }}
          >
            {/* <Button
              type="text"
              icon={
                collapsed ? (
                  <Icons.MenuUnfoldOutlined />
                ) : (
                  <Icons.MenuFoldOutlined />
                )
              }
              onClick={() => setCollapsed(!collapsed)}
              style={{
                fontSize: "16px",
                width: 64,
                height: 64,
              }}
            /> */}
          </Header>
          <Content
            style={{
              margin: "24px 16px",
              padding: 24,
              minHeight: 280,
              // background: colorBgContainer,
              borderRadius: borderRadiusLG,
            }}
          >
            <Outlet
              style={{
                margin: "24px 16px",
                padding: 24,
                minHeight: 280,
                background: colorBgContainer,
                borderRadius: borderRadiusLG,
              }}
            ></Outlet>
          </Content>
        </Layout>
      </Layout>
    </>
  );
};
export default Main;
